@charset "utf-8";
/**
 * Created by kroyo on 2018/1/13.
 * servicelist 
 */


@import '../common/mixincommon';


body{
    background-color: #F2F2F2;
}




.service-info{
    width: 100%;
    height: auto;
    background: url(../../img/demand/servicebg.png) no-repeat top;
    background-color: #ffffff;
    background-size: 100%;
    padding-left: r(30px);
    padding-right: r(30px);
    .span-label{
        display: inline-block;
        width: auto;
        height: r(50px);
        line-height: r(48px);
        font-size: r(28px);
        padding-left: r(20px);
        padding-right: r(20px);
        border: 1px solid #ffffff;
        @include borradius(r(25px));
        margin-right: r(20px);
    }
    .p-label{
        position: relative;
        left: r(-30px);
        width: r(150px);
        height: r(50px);
        line-height: r(50px);
        background-color: $servicebg;
        color: #ffffff;
        font-size: r(28px);
        text-align: center;
        @include borradius(0 r(25px) r(25px) 0);
    }
    .info-top{
        width: 100%;
        h2{
            height: r(114px);
            line-height: r(114px);
            font-size: r(36px);
            color: #ffffff;
        }
        .info-label{
            width: 100%;
            font-size: 0;
            color: #ffffff;
        }
    }
    .award-item{
        margin-top: r(100px);
        .award-list{
            width: 100%;
            margin-top: r(30px);
            margin-bottom: r(30px);
            font-size: 0;
        }
        .img-wrap{
            display: inline-block;
            width: r(50px);
            height: r(50px);
            @include borradius(50%);
            overflow: hidden;
            margin-right: r(20px);
        }
        .img-wrap:last-of-type{
            margin-right: 0;
        }
        img{
            width: 100%;
        }
    }
    .category-item{
        .category-list{
            font-size: 0;
            margin-top: r(30px);
            margin-bottom: r(10px);
        }
        .span-label{
            color: $s6;
            border-color: #dddddd;
            margin-bottom: r(20px);
        }
    }
    .linkinfo-item{
        padding-bottom: r(70px);
        .list-item{
            position: relative;
            font-size: r(28px);
            color: $s6;
            margin-top: r(30px);
            &:before{
                display: inline-block;
                content: '';
                width: r(32px);
                height: r(32px);
                margin-right: r(20px);
                vertical-align: r(-4px);
            }
        }
        .item-person:before{
            background: url(../../img/demand/icon-name.png) no-repeat center;
            background-size: 100%;
        }
        .item-phone:before{
            background: url(../../img/demand/icon-phone.png) no-repeat center;
            background-size: 100%;
        }
        .item-address{
            &:before{
                width: r(24px);
                background: url(../../img/demand/icon-location.png) no-repeat center;
                background-size: 100%;
            }
        }
    }
}







.related-case{
    width: 100%;
    height: auto;
    background-color: #ffffff;
    margin-top: r(20px);
    padding-left: r(30px);
    padding-right: r(30px);
    .case-title{
        width: r(300px);
        height: r(80px);
        line-height: r(80px);
        font-size: r(28px);
        color: #ffffff;
        @include borradius(0 0 r(40px) r(40px));
        background-color: $servicebg;
        margin: 0 auto r(60px);
        text-align: center;
    }
    .case-list{
        font-size: 0;
    }
    .list-item{
        display: inline-block;
        width: r(330px);
        margin-bottom: r(20px);
        margin-right: r(30px);
        &:nth-of-type(2n){
            margin-right: 0;
        }
        .img-wrap{
            position: relative;
            width: r(330px);
            height: r(330px);
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .img-wrap.nopublic:after{
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            content: '';
            width: r(100px);
            height: r(100px);
            background: url(../../img/demand/icon-nopublilc.png) no-repeat center;
            background-size: 100%;
        }
        .text{
            width: 100%;
            height: r(100px);
            line-height: r(98px);
            font-size: r(32px);
            color: $s3;
            padding-left: r(20px);
            border: 1px solid #dddddd;
        }
        .award-list{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            padding: 0 r(10px);
            font-size: 0;
            text-align: right;
            img{
                width: r(50px);
                height: r(50px);
                @include borradius(50%);
                margin-left: r(20px);
                margin-bottom: r(10px);
                overflow: hidden;
            }
        }
    }
    .case-btn{
        width: 100%;
        padding-top: r(40px);
        padding-bottom: r(40px);
        .more-btn{
            display: block;
            width: 100%;
            height: r(80px);
            line-height: r(80px);
            color: #ffffff;
            background-color: $servicebg;
            font-size: r(32px);
            text-align: center;
            @include borradius(r(40px))
        }
    }
}
